<style type="text/less" lang="less" scoped>
    @import url('./index.less');
</style>

<template>
    <el-container>
        <el-aside width="350px" class="content-left-list">
            <div class="ps-panel nav-left-menu" style="height: calc(100% - 30px);">
                <div class="ps-panel-head">
                    <span class="ps-panel-head-title">{{$route.query.type!='0'?'文件':'新闻'}}</span>
                    <button size="small" type="button" class="el-icon-upload menuTensile ps-right" v-if="$route.query.type!='0'" v-on:click="uploadVisible=true;fileList=[];" title="上传"></button>
                </div>

                <div class="ps-panel-body" >
                    <el-menu :default-active="active" ref="webMenu" class="el-menu-vertical" style="width: 100%;">
                        <el-menu-item v-for="item in webUrls" :key="item.id" :index="item.id.toString()" @click="preview(item)">{{item.title}}</el-menu-item>
                    </el-menu>
                </div>
            </div>
            <div class="pagination">
                <el-pagination small
                               :page-size="paginations.pageSize"
                               :layout="paginations.layout"
                               :total="paginations.total"
                               :current-page='paginations.pageIndex'
                               :pager-count="5"
                               @current-change='jump'
                               style="text-align: center;">
                </el-pagination>
            </div>
        </el-aside>
        <el-main class="content-main">
            <p class="title" v-html="webData.title"></p>

            <div class="auther" v-html="webData.auther"></div>

            <div class="content" v-html="webData.content"></div>


            <div class="analyze" v-show="webData.title">
                <router-link :to="'/connect/imageDetail?type='+$route.query.type+'&id='+webData.id" target="_self"><i class="iconfont icon-analyze"></i>分析</router-link>
            </div>
        </el-main>

        <el-dialog title="上传文件" :visible.sync="uploadVisible" width="450px">
            <el-upload
                    class="upload-demo"
                    ref="upload"
                    multiple
                    :action="this.$store.state.ajaxApi + 'api/newsUpload?type=' + this.uploadType"
                    :file-list="fileList"
                    :headers="{'token': token}"
                    accept=".txt"
                    :on-success="uploadSuccess"
                    :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取</el-button>
                <el-radio-group v-model="uploadType" size="small" style="margin-left: 10px;">
                    <el-radio-button :label="0">日志</el-radio-button>
                    <el-radio-button :label="1">态势</el-radio-button>
                </el-radio-group>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传txt文件</div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="uploadVisible=false">关 闭</el-button>
            </span>
        </el-dialog>
    </el-container>
</template>

<script>
    export default {
        name: "images",
        data: function() {
            return {
                active: '',
                paginations: {
                    pageIndex: 1,   // 当前位于哪页
                    pageSize: 20,   // 页显示多少条
                    total: 0,       // 总数
                    layout: "total, prev, pager, next"   // 翻页属性
                },
                webUrls: [],
                webData: {},
                previewVisible: false,
                uploadVisible: false,
                uploadType: 1,
                fileList: [],
                token: sessionStorage.token
            };
        },
        methods:  {
            jump(i) {
                if (i === undefined) {
                    i = this.paginations.pageIndex;
                } else {
                    this.paginations.pageIndex = i;
                }

                this.$store.dispatch('ajax', {url: 'api/newsList', method: 'get', data: {type: this.$route.query.type, page: i, number: this.paginations.pageSize},
                    succeed:
                        (res) => {
                            this.webUrls = res.rows;
                            this.paginations.total = res.total;
                        }
                });
            },
            preview(row) {
                this.webData = row;
                this.webData.auther = this.webData.time + '　　来源： ' + this.webData.author;
                this.previewVisible = true;
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            init() {
                this.jump(1);
            },
            uploadSuccess() {
                this.jump();
            }
        },
        mounted: function () {
            this.init();
        },
        watch:  {
            $route() {
                this.init();
            }
        }
    }
</script>
